<template>
	<scroll-view scroll-y="true">
		<view style="background-color: #F7F7F7;">
			<!-- <swiper class="carousel" circular autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in images" :key="index" class="carousel-item" >
					<image src="../../static/storeimg.png"></image>
				</swiper-item>
			</swiper> -->
			<swiper class="carousel" circular autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in banners" :key="index" class="carousel-item" >
					<image :src="item.picUrl"></image>
				</swiper-item>
			</swiper>
			<view class="storeinfo">
				<view style="display: flex;">
					<view class="storename">
						<text>{{store.name}}</text>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;padding-left: 100rpx;">
						<view class="changestore" @click="changeStore()">
							<text class="iconfont" style="font-size: 24rpx;margin-right: 5rpx;">&#xe602;</text>
							<text>切换门店</text>
						</view>
					</view>
				</view>
				<view class="address">
					<text>{{store.addressLat}}</text>
				</view>
				<view class="tag">
					<view class="tag1">
						<text class="iconfont icon-wifi tagtxt"></text>
						<text class="tagname">wifi覆盖</text>
					</view>
					<view class="tag1">
						<text class="iconfont icon-beverage tagtxt"></text>
						<text class="tagname">自助饮料</text>
					</view>
					<view class="tag1">
						<text class="iconfont icon-fresh tagtxt"></text>
						<text class="tagname">新风系统</text>
					</view>
					<view class="tag1">
						<text class="iconfont icon-majiang tagtxt"></text>
						<text class="tagname">玉石麻将</text>
					</view>
				</view>
				<view class="olinfo">
					<view>
						<text class="iconfont icon-time addortime"></text>
						<text class="addortime" style="margin-left: 13rpx;">营业时间：{{store.onlineTime}}</text>
						<text class="iconfont icon-phone addortime" style="margin-left: 39rpx;"></text>
						<text class="addortime" style="margin-left: 13rpx;">{{store.servicePhone}}</text>
					</view>
					<view>
						<text class="iconfont icon-location addortime"></text>
						<text class="addortime" style="margin-left: 13rpx;">距您步行{{distance}}km,约{{time}}分钟</text>
					</view>
					<view style="display: flex;">
						<view class="righticon"
							@click="toAddress(store.addressLat,store.name,store.longitude,store.latitude)">
							<text class="iconfont icon-navigation"></text>
						</view>
						<view class="rightphone" @click="call(store.servicePhone)">
							<text class="iconfont icon-phone"></text>
						</view>
					</view>
				</view>
			</view>
			<view style="height: auto;background-color: #F7F7F7">
				<view class="selectroom">
					<view class="borderleft"></view>
					<text>请选择包间</text>
				</view>
				<view class="typeList" v-if="item.isMealdevice==0"
					@click="getDeviceMeal(item.id,item.machineName,item.deviceDesc,item.imageUrl,store.addressLat,item.room.status)"
					v-for="(item, ind) in devices" :key="ind">
					<view class="tagroom">
						<image v-if='item.room.status==0' class="tagimage" src="../../static/store/idle.png"></image>
						<!-- <image v-if='item.room.status==1' class="tagimage" src="../../static/store/already.png"></image> -->
						<image v-if='item.room.status==1' class="tagimage" src="../../static/store/using.png"></image>
						<image v-if='item.room.status==2' class="tagimage" src="../../static/store/cleaning.png"></image>
					</view>
					<view style="display: flex;">
						<view class="typeImg">
							<image :src="item.imageUrl" mode="" @click.stop="fangda(item.imageUrl)"></image>
							<view v-if='item.room.status==1' class="endtime">
								<text style="font-size: 24rpx;color: #ffffff;">{{item.endTime}}结束</text>
							</view>
						</view>
						<view style="flex: 5;">
							<view style="display: flex;">
								<view class="roomname">
									<text>{{item.machineName}}</text>
								</view>
								<view class="yuyuebtn">
									<text class="iconfont icon-reservation" style="color: #FFFFFF;font-size: 24rpx;margin-right: 14rpx;"></text>
									<text>预定</text>
								</view>
							</view>
							<view style="display: flex;margin-top: 6rpx;">
								<view class="roomtag1">
									<text>{{item.room.status | formatStatus}}</text>
								</view>
								<view class="roomtag2">
									<text>{{item.customerMeal}}</text>
								</view>
							</view>
							<view class="desc">
								<text>{{item.deviceDesc}}</text>
							</view>
						</view>
					</view>
					<view style="">
						<view style="display: flex;padding: 32rpx;">
							<view v-for="(item1,index) in item.timeAxes" :key="index" :style="item1.style">
								<text style="font-size: 10rpx">{{item1.hour}}</text>
							</view>
						</view>
					</view>
					<view>
						<view style="display: flex;padding-left: 32rpx;">
							<view
								style="background:#E8E8E8;;height:36rpx;width: 17rpx;margin-right: 10rpx;height: 22rpx;padding-left: 5rpx;border-radius: 5rpx;">
							</view>
							<view style="font-size: 18rpx;height: 22rpx;line-height: 22rpx;margin-right: 27rpx;">
								<text>可预约</text>
							</view>
							<view
								style="background:#F04747;height:36rpx;width: 17rpx;margin-right: 10rpx;height: 22rpx;padding-left: 5rpx;border-radius: 5rpx;margin-left: 10rpx;">
							</view>
							<view style="font-size: 18rpx;height: 22rpx;line-height: 22rpx;margin-right: 27rpx;">
								<text>使用中</text>
							</view>
							<view
								style="background:#0DA944;height:36rpx;width: 17rpx;margin-right: 10rpx;height: 22rpx;padding-left: 5rpx;border-radius: 5rpx;margin-left: 10rpx;">
							</view>
							<view style="font-size: 18rpx;height: 22rpx;line-height: 22rpx;margin-right: 27rpx;">
								<text>已预约</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="tishi" :mask-click="false" type="center">
			<view class="unipopup">
				<image src="/static/notice.png"></image>
				<view style="margin: 20rpx;">
					<view class="firsttxt">
						<text>欢迎来到雀都自助共享空间，懂娱乐，更懂年轻人！本空间使用者需遵守《治安管理条例》，注意个人言行及个人安全，违者自行承担相应责任及后果：</text>
					</view>
					<view class="secondtxt">
						<text>一、严禁未成年人进入本场所</text>
					</view>
					<view class="secondtxt">
						<text>二、严禁黄、赌、毒</text>
					</view>
					<view class="secondtxt">
						<text>三、本场所提供的设备设施，损坏需照价赔偿</text>
					</view>
					<view class="secondtxt">
						<text>四、本场为自助共享空间，需自行保管好私人物品，如有遗失，概不负责</text>
					</view>
				</view>
				<view class="buttomafrim" @click="closeTishi()"><text>阅读 我已知晓</text></view>
			</view>
		</uni-popup>
	</scroll-view>
</template>

<script>
	import Api from '@/common/api';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		formatDate
	} from '@/common/date';
	export default {
		components: {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				storeId: 0,
				devices: [],
				banners: [
					'/static/b1.jpg',
					'/static/b2.jpg'
				],
				swiperCurrent: 0,
				store: {},
				mobile:'',
				nums: [
					0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
				],
				distance:0,
				time:0
			}
		},
		onLoad(options) {
			let that = this;
			that.storeId = options.storeId;
			that.getBanners(options.storeId);
			that.distance = options.distance;
			let time = that.distance * 6;
			time = parseInt(time)
			this.time = time
			that.loadData();
			this.$refs.tishi.open('center')
		},
		filters: {
			formatStatus(status) {
				if (status == 0) {
					return '可预订'
				}
				if (status == 1) {
					return '使用中'
				}
				if (status == 2) {
					return '未打扫'
				}
				if (status == 3) {
					return '维护中'
				}
				if (status == 4) {
					return '已禁用'
				}
			}
		},
		methods: {
			closeTishi(){
				this.$refs.tishi.close()
			},
			async loadData() {
				let that = this;
				that.getDevices();
				that.getStoreById();
			},
			async getDevices() {
				let data = await Api.apiCall('get', Api.device.getDevices, {
					storeId: this.storeId
				});
				if (data) {
					console.log(data)
					this.devices = data;
				}
			},
			async getStoreById() {
				console.log(11111111111)
				let data = await Api.apiCall('get', Api.store.getStoreById, {
					storeId: this.storeId
				})
				if (data) {
					this.store = data;
				}
			},
			call(mobile) {
				console.log(mobile)
				if (typeof(mobile) == 'undefined' || mobile == '') {

				} else {
					uni.makePhoneCall({
						phoneNumber: mobile,
						success: function() {
							console.log('拨打电话成功');
						},
						fail() {
							console.log('打电话失败了');
						}
					})
				}
			},
			fangda(url) {
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			async getBanners(storeId) {
				console.log(2313211321)
				let data = await Api.apiCall('get', Api.qsg.storeBanner, {
					storeId: storeId
				});
				console.log(data)
				if (data) {
					console.log(data)
					this.banners = data;
				}
			},
			async getDeviceMeal(deviceId, machineName, desc, image, address, status) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '请先授权登录.',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/public/login'
								});
							} else if (res.cancel) {

							}
						}
					});
				} else {
					if (status == 2) {
						let that = this;
						uni.showModal({
							title: '提示',
							content: '该房间暂未打扫，是否继续使用?',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/meallist/selectMeal?deviceId=' + deviceId +
											'&storeId=' + that.storeId + '&machineName=' +
											machineName + '&desc=' + desc + '&image=' + image +
											'&address=' + address + '&status=' + status +
											'&dasaoTime=' + that.store.dasaoTime + '&storeName='+that.store.name
									})
								} else if (res.cancel) {

								}
							}
						});
					} else if (status == 3) {
						uni.showToast({
							icon: 'error',
							title: '该设备已离线'
						})
						return false;
					} else if (status == 4) {
						uni.showToast({
							icon: 'error',
							title: '该设备已禁用'
						})
						return false;
					} else {
						uni.navigateTo({
							url: '/pages/meallist/selectMeal?deviceId=' + deviceId + '&storeId=' + this
								.storeId + '&machineName=' + machineName + '&desc=' + desc + '&image=' +
								image + '&address=' + address + '&status=' + status + '&dasaoTime=' + this
								.store.dasaoTime + '&storeName='+this.store.name
						})
					}
				}
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			changeStore(){
				uni.navigateTo({
					url:'/pages/store/storeList'
				})
			},
			toAddress(address, name, longitude, latitude) {
				//此处item是 你获取到的当前点击的那一条数据  方法里面需要用到 名称  地址 经纬度
				uni.openLocation({
					latitude: Number(latitude), //目标纬度
					longitude: Number(longitude), //目标经度
					name: name, //名称
					address: address, //地址
					scale: 28
				});
			}

		}
	}
</script>

<style lang="scss">
	.roomtag1 {
		width: 78rpx;
		height: 28rpx;
		background: linear-gradient(90deg, #FFE2AE 0%, #E3B97F 100%);
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #492A00;
		line-height: 28rpx;
		text-align: center;
	}

	.roomtag2 {
		width: auto;
		height: 28rpx;
		background: #E3F6E4;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0DA944;
		line-height: 28rpx;
		text-align: center;
		margin-left: 18rpx;
	}

	.addortime {
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
	}

	.first {
		background-color: beige;
		height: calc(100% - 40px);
	}

	.tag1 {
		flex: 1;
		text-align: center;
	}

	.checkMore {
		display: block;
		width: 150rpx;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 24rpx;
		color: #29936d;
		border: 1px solid #29936d;
		text-align: center;
		box-sizing: border-box;
		/* margin-top: 46rpx; */
		margin-right: 30rpx;
		border-radius: 50rpx;
		float: right;
	}

	.typeImg {
		height: 170rpx;
		margin-right: 20rpx;
		width: 100rpx;
		position: relative;
		margin-left: 32rpx;
		flex: 2
	}
	
	.tagroom{
		position: absolute;
		top: 18rpx;
		left: -10rpx;
		z-index: 2;
	}
	
	.tagimage{
		width: 128rpx;
		height: 70rpx;
	}

	.costNum {
		font-size: 28rpx;
		color: #e61a0f;
		font-weight: bold;
	}

	.typeTitle {
		font-size: 25rpx;
		font-weight: 600;
		line-height: 50rpx;
		color: #29936d;
	}

	.typeTitle1 {
		font-size: 20rpx;
		font-weight: 400;
		line-height: 50rpx;
		color: #757575;
	}

	.typeImg image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 12rpx;
	}

	.olinfo {
		padding-left: 32rpx;
		padding-top: 27rpx;
	}

	.righticon {
		color: #0DA944;
		position: relative;
		top: -90rpx;
		left: 520rpx;
		width: 72rpx;
		height: 72rpx;
		background: #E3F6E4;
		border-radius: 50%;
		line-height: 72rpx;
		text-align: center;
	}

	.rightphone {
		color: #0DA944;
		position: relative;
		top: -90rpx;
		left: 540rpx;
		width: 72rpx;
		height: 72rpx;
		background: #E3F6E4;
		border-radius: 50%;
		line-height: 72rpx;
		text-align: center;
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 30upx;
		bottom: 94upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	
	.carousel {
		width: 100%;
		height: 400rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	
		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}
	}

	.tagList {
		overflow: hidden;
		height: 40rpx;
	}

	.typeCost {
		width: 100%;
		height: 140rpx;
		line-height: 62rpx;
		padding-left: 8rpx;
		padding-top: 50rpx;
	}

	.typeDetail {
		width: 100%;
		height: 140rpx;
	}

	.typeList {
		width: 686rpx;
		height: 318rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;
		margin-left: 32rpx;
		margin-bottom: 16rpx;
		padding-top: 29rpx;
		position: relative;
		z-index: 1;
	}

	.desc {
		width: 437rpx;
		height: 55rpx;
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
		margin-top: 20rpx;
	}

	.storeinfo {
		height: 330rpx;
		background: linear-gradient(0deg, #F7F7F7 0%, #FFFFFF 100%);
		border-radius: 36rpx 36rpx 0rpx 0rpx;
		position: relative;
		top: -60rpx;
		padding-top: 32rpx;
	}

	.tagtxt {
		font-size: 20rpx;
		color: #0DA944;
		margin-right: 12rpx;
	}

	.borderleft {
		width: 4rpx;
		height: 28rpx;
		background: #0DA944;
		border-radius: 2rpx;
		margin-right: 20rpx;
	}
	
	.firsttxt{
		text-indent: 30rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #492A00;
	}
	
	.secondtxt{
		font-size: 28rpx;
		line-height: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #492A00;
	}

	.storeimg {
		width: 100%;
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.roomname {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
		line-height: 34rpx;
		line-height: 56rpx;
		width: 300rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.storename {
		font-size: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
		margin-left: 32rpx;
	}

	.selectroom {
		height: 28rpx;
		line-height: 28rpx;
		display: flex;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1A1A1A;
		margin-left: 32rpx;
		margin-right: 16rpx;
		margin-bottom: 32rpx;
		margin-top: 10rpx;
	}

	.address {
 		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		margin-left: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	.yuyuebtn{
		width: 128rpx;
		height: 56rpx;
		background: #0DA944;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}
	
	.changestore{
		width: 158rpx;
		height: 50rpx;
		background: #0DA944;
		border-radius: 28rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

	.tag {
		width: 686rpx;
		height: 64rpx;
		background: #F1F3F4;
		border-radius: 16rpx;
		display: flex;
		margin-left: 32rpx;
		margin-top: 30rpx;
		line-height: 64rpx;
	}

	.typeList:first-child {
		padding-top: 0;
	}

	.priceSign {
		font-size: 24rpx;
	}

	.tagname {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}

	.endtime {
		width: 170rpx;
		height: 30rpx;
		line-height: 30rpx;
	    background-color:#dd7e6b;
		position: absolute;
		bottom: 2rpx;
		border-bottom-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		text-align: center;
	}

	.typeTag {
		display: inline-block;
		vertical-align: top;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 40rpx;
		line-height: 40rpx;
		background: #f5f5fa;
		font-size: 20rpx;
		color: #575759;
		margin-right: 14rpx;
		border: none;
	}

	.priceNum {
		font-size: 32rpx;
		font-weight: bold;
	}

	.priceIcon {
		font-size: 24rpx;
	}

	.schoolName {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bold;
		color: #000000;
	}

	.uni-input {
		padding: 0 24rpx;
	}

	.choese {
		width: 750rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		color: #888888;
	}

	.dataName {
		height: 60rpx;
	}

	.currentSchool {
		height: 60rpx;
		background: #FFFFFF;
	}

	.video-tit {
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
		display: inline-block;
		vertical-align: top;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.checkMore text {
		display: block;
		width: 100%;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 24rpx;
		color: #29936d;
		border: 1px solid #29936d;
		text-align: center;
		box-sizing: border-box;
		margin-top: 46rpx;
		border-radius: 50rpx;
	}

	.checkMore {
		font-size: 24rpx;
		color: #29936d;
		flex: 1;
	}

	.video-price {
		font-size: 30rpx;
		color: #ecb20d;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		box-sizing: border-box;
	}

	.video-reader {
		font-size: 24rpx;
		color: #666;
	}

	.video-describe {
		flex: 3;
		display: inline-block;
		vertical-align: top;
	}

	.video-cover {
		width: 100rpx;
		height: 100rpx;
		margin: 30rpx 30rpx 30rpx 0;
		display: inline-block;
		vertical-align: top;
		border-radius: 50%;
		flex: 1;
	}

	.video-cover image {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	
	.buttomafrim {
		width: 300rpx;
		height: 80rpx;
		background: #0DA944;
		border-radius: 40rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: absolute;
		bottom: 10rpx;
		left: 145rpx;
	}

	.video-content {
		width: 690rpx;
		padding: 22rpx 0;
		border-bottom: 1rpx solid #e6e6e6;
		box-sizing: border-box;
		display: flex;
	}

	.video-content:last-child {
		border: none;
	}

	.video-list {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.unipopup {
		height: 800rpx;
		width: 580rpx;
		background-color: #FFFFFF;
		font-size: 28px;
		border-radius: 24rpx;
		padding-bottom: 20rpx;
		z-index: 2;
		image {
			width:100%;
			height: 150rpx;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
		}
		position: relative;
	}
</style>